<template>
    <div>
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="商品介绍">
                <ProductIntroductionTagComponent
                    :spuInfoDesc="props.skuInfoItemVo.spuInfoDesc"></ProductIntroductionTagComponent>
            </a-tab-pane>
            <a-tab-pane key="2" tab="规格与包装">
                <ProductAttrsTagComponent
                    :group-attrs="props.skuInfoItemVo.groupAttrs"></ProductAttrsTagComponent>
            </a-tab-pane>
            <a-tab-pane key="3" tab="售后保障">售后保障</a-tab-pane>
            <a-tab-pane key="4" tab="商品评价">商品评价</a-tab-pane>
            <a-tab-pane key="5" tab="预约说明">预约说明</a-tab-pane>
        </a-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ProductIntroductionTagComponent from "@/pages/search/product-details/ProductIntroductionTagComponent.vue";
import { SkuInfoItemVo } from "@/model/ProductModel.ts";
import ProductAttrsTagComponent from "@/pages/search/product-details/ProductAttrsTagComponent.vue";
//本组件需要的默认属性
const props = defineProps<{ skuInfoItemVo: SkuInfoItemVo }>();

//当前选中的标签页
const activeKey = ref("1");


</script>

<style lang="scss" scoped>

:deep(.ant-tabs-nav) {
    background-color: #eee
}

</style>